import type { CountryDetail, FacilityType } from "@dci/core";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Breadcrumbs } from "@/components/entity/breadcrumbs";
import { EntityMap } from "@/components/entity/entity-map";
import { JsonLd } from "@/components/entity/json-ld";
import { fPageHref, PagedFacilities, parseFPage } from "@/components/entity/paged-facilities";
import { SectionNav } from "@/components/entity/section-nav";
import { SourcesFooter } from "@/components/entity/sources-footer";
import { EventList } from "@/components/event-list";
import { ClaimsTable } from "@/components/evidence";
import { FacilityTable } from "@/components/facility-table";
import { EnergyContextPanel } from "@/components/intelligence/country/energy";
import { CoverageBar, CoverageStrip, GridConstraintList, HonestEmpty, PillLink, PipelineBars, PublishedOnlyNote, ShareList } from "@/components/intelligence/shared";
import { WatchButton } from "@/components/intelligence/watch-button";
import { ProjectList } from "@/components/project-list";
import { Badge, EstimateMark } from "@/components/ui/badge";
import { Page, Section } from "@/components/ui/card";
import { StackedBar } from "@/components/ui/charts";
import { CountBarList } from "./bars";
import { CountryFlag } from "@/components/ui/country-flag";
import { Metric, MetricCell, MetricRow } from "@/components/ui/metric";
import { EmptyState, ErrorState, OfflineNotice } from "@/components/ui/states";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { api } from "@/lib/api";
import type { DetailFacilitiesMeta } from "@/lib/dto";
import { fmtCompact, fmtDate, fmtInt, fmtMw, fmtPct, fmtUsd, pluralize, splitMw } from "@/lib/format";
import { OPERATOR_KIND_LABEL, TYPE_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";
import { compactJsonLd, NOT_FOUND_METADATA, pageMetadata } from "@/lib/seo";
import type { SearchParams } from "@/lib/sort";
import { GrowthChart } from "./growth-chart";

export const revalidate = 300;

type Props = { params: Promise<{ slug: string }>; searchParams: Promise<SearchParams> };

const HUGE = new Set(["US", "CA", "RU", "CN", "AU", "BR"]);
const SMALL = new Set(["SG", "HK", "LU", "MT", "BH", "QA", "AE", "IL", "NL", "BE", "CH", "IE", "DK", "TW", "KW", "CY", "EE", "LV", "LT", "SI", "PR", "IS"]);
// ≥ 5 so the API returns grid clusters instead of one country-level bubble
const zoomFor = (iso2: string) => (HUGE.has(iso2) ? 5 : SMALL.has(iso2) ? 7 : 5.5);

function describe(c: CountryDetail): string {
  const bits = [`${fmtInt(c.facilityCount)} data center ${pluralize(c.facilityCount, "facility", "facilities")}`];
  if (c.knownMw) bits.push(`${fmtMw(c.knownMw)} known operational capacity (${fmtPct(c.mwCoverage)} of facilities publish a figure)`);
  const pipe = (c.constructionMw ?? 0) + (c.plannedMw ?? 0);
  if (pipe) bits.push(`≈ ${fmtMw(pipe)} in the pipeline`);
  bits.push(`${fmtInt(c.operatorCount)} ${pluralize(c.operatorCount, "operator")}`);
  bits.push(`${fmtInt(c.cloudRegionCount)} cloud ${pluralize(c.cloudRegionCount, "region")}`);
  if (c.hyperscaleCount) bits.push(`${fmtInt(c.hyperscaleCount)} hyperscale`);
  return `Data centers in ${c.name}: ${bits.join(", ")}. Markets, operators, project pipeline, AI infrastructure, cloud footprint, internet exchanges, energy context and grid constraints — every figure sourced.`;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const r = await api.country(slug);
  if (!r.ok) return r.status === 404 ? NOT_FOUND_METADATA : { title: "Country", alternates: { canonical: routes.country(slug) } };
  return pageMetadata({ title: `Data Centers in ${r.data.name}`, description: describe(r.data), path: routes.country(r.data.slug) });
}

function Mw({ mw, estimate }: { mw: number | null | undefined; estimate?: boolean }) {
  const s = splitMw(mw);
  if (!s) return <span className="text-ink-4">—</span>;
  return (
    <>
      {estimate && <EstimateMark className="mr-0.5 text-[0.6em]" />}
      {s.value}
    </>
  );
}
const unitOf = (mw: number | null | undefined) => splitMw(mw)?.unit ?? undefined;

const IXP_ROWS = 15;

export default async function CountryPage({ params, searchParams }: Props) {
  const [{ slug }, sp] = await Promise.all([params, searchParams]);
  const fPage = parseFPage(sp.fPage);
  const r = await api.country(slug, fPage > 1 ? { fPage } : undefined);
  if (!r.ok && r.status === 404) notFound();
  if (!r.ok) {
    return (
      <Page className="py-6">
        <OfflineNotice detail={r.error} className="mb-4" />
        <ErrorState />
      </Page>
    );
  }
  const c = r.data;
  const meta = (r.meta ?? {}) as DetailFacilitiesMeta;
  const facTotal = meta.facilitiesTotal ?? c.facilityCount;
  const facPer = meta.facilitiesPerPage ?? 50;
  const base = routes.country(c.slug);
  const statusTotal = Object.values(c.statusBreakdown).reduce((a, b) => a + (b ?? 0), 0);
  const types = (Object.entries(c.typeBreakdown) as Array<[FacilityType, number]>).filter(([, n]) => n > 0).sort((a, b) => b[1] - a[1]);
  const metros = [...c.metros].sort((a, b) => b.facilityCount - a.facilityCount);
  const topOps = [...c.topOperators].sort((a, b) => b.facilityCount - a.facilityCount).slice(0, 10);
  const cloud = [...c.cloudRegions].sort((a, b) => a.provider.name.localeCompare(b.provider.name) || a.code.localeCompare(b.code));
  const ixps = [...(c.ixps ?? [])].sort((a, b) => b.facilityCount - a.facilityCount || a.name.localeCompare(b.name));
  const ixpCount = c.ixpCount ?? ixps.length;
  const aiFacilities = c.aiFacilities ?? [];
  const aiProjects = c.aiProjects ?? [];
  const gridConstraints = c.gridConstraints ?? [];
  const claims = c.claims ?? [];
  const hasAi = aiFacilities.length > 0 || aiProjects.length > 0;
  const facTotalForShare = c.facilityCount || 1;

  const jsonLd = compactJsonLd({
    "@context": "https://schema.org",
    "@type": "Country",
    name: c.name,
    identifier: c.iso2,
    url: `${routes.country(c.slug)}`,
    description: describe(c),
    geo: c.lat !== null && c.lng !== null ? { "@type": "GeoCoordinates", latitude: c.lat, longitude: c.lng } : undefined,
  });

  const sections = [
    { id: "map", label: "Map", count: c.facilityCount },
    { id: "growth", label: "Growth" },
    { id: "breakdown", label: "Breakdown", count: statusTotal },
    { id: "markets", label: "Markets", count: metros.length },
    { id: "operators", label: "Operators", count: topOps.length },
    { id: "pipeline", label: "Pipeline" },
    { id: "ai", label: "AI", count: hasAi ? aiFacilities.length + aiProjects.length : 0 },
    { id: "cloud", label: "Cloud", count: cloud.length },
    { id: "connectivity", label: "Connectivity" },
    { id: "projects", label: "Projects", count: c.recentProjects.length },
    { id: "changes", label: "Changes", count: c.recentEvents.length },
    { id: "energy", label: "Energy" },
    { id: "grid", label: "Grid" },
    { id: "coverage", label: "Coverage" },
    { id: "facilities", label: "Facilities", count: facTotal },
    { id: "claims", label: "Claims", count: claims.length },
  ];

  return (
    <Page>
      <JsonLd data={jsonLd} />
      <div className="pt-3">
        <Breadcrumbs items={[{ name: "Countries", href: routes.countries() }, { name: c.name, href: base }]} />
      </div>

      <header className="py-5 sm:py-7">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div className="min-w-0">
            <div className="label-caps">Country · {c.iso2}</div>
            <h1 className="mt-1.5 flex items-center gap-2.5 text-[24px] font-semibold leading-tight tracking-[-0.02em] text-ink sm:text-[30px]">
              <CountryFlag iso2={c.iso2} size={26} />
              <span>Data centers in {c.name}</span>
            </h1>
            <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[13px] text-ink-2">
              {(c.region || c.subregion) && <span>{[c.region, c.subregion].filter((v, i, a): v is string => Boolean(v) && a.indexOf(v) === i).join(" · ")}</span>}
              {c.population !== null && (
                <span className="figure text-ink-3" title="Population, latest World Bank vintage">
                  {fmtCompact(c.population)} residents
                </span>
              )}
              {c.gdpUsd !== null && (
                <span className="figure text-ink-3" title="GDP, current US$, World Bank">
                  {fmtUsd(c.gdpUsd)} GDP
                </span>
              )}
              {(c.population !== null || c.gdpUsd !== null) && <span className="text-[11px] text-ink-4">World Bank</span>}
            </div>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <WatchButton entityType="country" slug={c.slug} name={c.name} />
            <PillLink href={routes.explore(`entity=facilities&country=${c.iso2}`)}>Explore →</PillLink>
          </div>
        </div>
      </header>

      <MetricRow cols={5}>
        <MetricCell>
          <Metric value={fmtInt(c.facilityCount)} label="Facilities" note={`${fmtInt(c.operationalCount)} operational`} />
        </MetricCell>
        <MetricCell>
          <Metric value={<Mw mw={c.knownMw} />} unit={unitOf(c.knownMw)} label="Operational MW" note={<CoverageBar value={c.mwCoverage} label="MW coverage" width="w-full max-w-[150px]" />} />
        </MetricCell>
        <MetricCell>
          <Metric value={<Mw mw={c.constructionMw} estimate />} unit={unitOf(c.constructionMw)} label="Under construction" note={`${fmtInt(c.constructionCount)} ${pluralize(c.constructionCount, "site")}${c.constructionMw === null && c.constructionCount ? ", MW not published" : ""}`} />
        </MetricCell>
        <MetricCell>
          <Metric value={<Mw mw={c.plannedMw} estimate />} unit={unitOf(c.plannedMw)} label="Planned MW" note={`${fmtInt(c.plannedCount)} planned ${pluralize(c.plannedCount, "site")}${c.plannedMw === null && c.plannedCount ? ", MW not published" : ""}`} />
        </MetricCell>
        <MetricCell>
          <Metric value={c.announcedInvestmentUsd ? fmtUsd(c.announcedInvestmentUsd) : "—"} label="Announced investment" note={c.announcedInvestmentUsd ? "site-scoped project figures, published" : "not published"} />
        </MetricCell>
      </MetricRow>
      <MetricRow cols={5} className="border-t-0 [&>div]:border-t-0">
        <MetricCell>
          <Metric size="sm" value={fmtInt(c.operatorCount)} label="Operators" />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={fmtInt(c.cloudRegionCount)} label="Cloud regions" />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={fmtInt(c.hyperscaleCount)} label="Hyperscale" />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={fmtInt(c.aiCount)} label="AI facilities" note="confirmed + likely" />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={fmtInt(ixpCount)} label="Internet exchanges" />
        </MetricCell>
      </MetricRow>

      {c.rankings.length > 0 && (
        <div className="-mx-3 mt-3 flex items-center gap-1.5 overflow-x-auto px-3 no-scrollbar sm:mx-0 sm:flex-wrap sm:px-0" aria-label="Ranking positions">
          <span className="label-caps shrink-0">Rankings</span>
          {c.rankings.map((rk) => (
            <Link key={rk.key} href={routes.ranking(rk.key)} className="inline-flex h-10 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-sm border border-hair bg-surface px-2 text-[12px] text-ink hover:bg-surface-2 sm:h-7">
              <span className="figure font-medium">
                #{rk.rank}
                <span className="text-ink-4">/{rk.total}</span>
              </span>
              <span className="text-ink-2">{rk.label}</span>
            </Link>
          ))}
        </div>
      )}

      <SectionNav items={sections} className="mt-4" />

      <div className="flex flex-col gap-8 pt-6">
        <Section id="map" title="Map" description="Facilities in the country; hollow rings are city-level locations. Cloud regions are listed below." className="scroll-mt-28">
          <EntityMap center={c.lat !== null && c.lng !== null ? { lat: c.lat, lng: c.lng } : null} zoom={zoomFor(c.iso2)} filters={{ country: c.iso2 }} openLabel={`Open ${c.name} in map`} className="h-[240px] sm:h-[380px]" />
        </Section>

        <Section id="growth" title="Growth" description="By opening year of indexed facilities. Facilities without a published opening date are not charted." className="scroll-mt-28">
          <GrowthChart data={c.growth} />
        </Section>

        <Section id="breakdown" title="Breakdown" description="Status and facility type of indexed records." className="scroll-mt-28">
          <div className="grid gap-6 md:grid-cols-2">
            <div>
              <div className="label-caps mb-2">Status</div>
              {statusTotal ? <StackedBar data={c.statusBreakdown} height={12} /> : <EmptyState compact title="No status data" />}
            </div>
            <div>
              <div className="label-caps mb-2">Type</div>
              {types.length ? <CountBarList items={types.map(([t, n]) => ({ label: TYPE_LABEL[t], value: n, href: routes.datacenters(`country=${c.iso2}&type=${t}`) }))} showRank={false} /> : <EmptyState compact title="No type data" />}
            </div>
          </div>
        </Section>

        {metros.length > 0 && (
          <Section id="markets" title="Top markets" description={`${fmtInt(metros.length)} ${pluralize(metros.length, "metro")} with indexed infrastructure`} className="scroll-mt-28" aside={<Link href={routes.markets()} className="text-[12.5px] text-ink-3 hover:text-ink">All markets →</Link>}>
            <Table dense mobileCollapse={{ total: metros.length, label: "markets" }}>
              <THead>
                <tr>
                  <Th>Market</Th>
                  <Th numeric>Facilities</Th>
                  <Th numeric>Known MW</Th>
                  <Th numeric>Pipeline</Th>
                  <Th numeric className="hidden sm:table-cell">
                    Cloud regions
                  </Th>
                  <Th numeric className="hidden md:table-cell">
                    IXPs
                  </Th>
                  <Th numeric className="hidden md:table-cell">
                    Operators
                  </Th>
                </tr>
              </THead>
              <TBody>
                {metros.map((m) => {
                  const pipe = m.constructionMw === null && m.plannedMw === null ? null : (m.constructionMw ?? 0) + (m.plannedMw ?? 0);
                  return (
                    <Tr key={m.id}>
                      <Td primary>
                        <RowLink href={routes.market(m.slug)}>{m.name}</RowLink>
                        {m.regionName && m.regionName !== m.name && <span className="ml-1.5 text-[11.5px] text-ink-3">{m.regionName}</span>}
                      </Td>
                      <Td label="Facilities" numeric lead>
                        {fmtInt(m.facilityCount)}
                      </Td>
                      <Td label="Known MW" numeric>
                        {m.knownMw === null ? <span className="text-ink-4">—</span> : fmtMw(m.knownMw)}
                      </Td>
                      <Td label="Pipeline" numeric>
                        {pipe === null ? (
                          <span className="text-ink-4">—</span>
                        ) : (
                          <>
                            <EstimateMark className="mr-0.5" />
                            {fmtMw(pipe)}
                          </>
                        )}
                      </Td>
                      <Td label="Cloud regions" numeric className="hidden sm:table-cell">
                        {fmtInt(m.cloudRegionCount)}
                      </Td>
                      <Td label="IXPs" numeric className="hidden md:table-cell">
                        {fmtInt(m.ixpCount)}
                      </Td>
                      <Td label="Operators" numeric className="hidden md:table-cell">
                        {fmtInt(m.operatorCount)}
                      </Td>
                    </Tr>
                  );
                })}
              </TBody>
            </Table>
          </Section>
        )}

        {topOps.length > 0 && (
          <Section id="operators" title="Top operators" description={`${fmtInt(c.operatorCount)} ${pluralize(c.operatorCount, "operator")} with facilities in ${c.name}; share of the country's facility count`} className="scroll-mt-28" aside={<Link href={routes.datacenters(`country=${c.iso2}`)} className="text-[12.5px] text-ink-3 hover:text-ink">All facilities →</Link>}>
            <ShareList items={topOps.map((o) => ({ key: o.id, label: <>{o.name}{o.kind && <span className="ml-1.5 text-[11px] text-ink-3">{OPERATOR_KIND_LABEL[o.kind]}</span>}</>, href: routes.operator(o.slug), count: o.facilityCount, share: o.facilityCount / facTotalForShare, mw: o.knownMw ?? null }))} unit="facilities" />
          </Section>
        )}

        <Section id="pipeline" title="Project pipeline" description="Facilities by lifecycle bucket with the MW they publish, then project records by stage." className="scroll-mt-28" aside={<Link href={routes.projects(`country=${c.iso2}`)} className="text-[12.5px] text-ink-3 hover:text-ink">All projects →</Link>}>
          {c.pipeline ? <PipelineBars pipeline={c.pipeline} /> : <HonestEmpty title="Pipeline breakdown unavailable" />}
          <PublishedOnlyNote className="mt-3" />
        </Section>

        {hasAi && (
          <Section id="ai" title="AI infrastructure" description="Facilities and projects with confirmed or likely AI / HPC evidence. A single keyword never confirms a site." className="scroll-mt-28" aside={<Link href={routes.ai()} className="text-[12.5px] text-ink-3 hover:text-ink">AI infrastructure index →</Link>}>
            {aiFacilities.length > 0 && (
              <div className="mb-4">
                <div className="label-caps mb-2">Facilities ({fmtInt(aiFacilities.length)})</div>
                <FacilityTable items={aiFacilities} columns={["operator", "market", "status", "mw", "type"]} />
              </div>
            )}
            {aiProjects.length > 0 && (
              <div>
                <div className="label-caps mb-2">Projects ({fmtInt(aiProjects.length)})</div>
                <ProjectList items={aiProjects} />
              </div>
            )}
          </Section>
        )}

        {cloud.length > 0 && (
          <Section id="cloud" title="Cloud footprint" description={`${fmtInt(cloud.length)} public cloud ${pluralize(cloud.length, "region")} located in ${c.name} — associated with a market, not a specific facility unless a source says so`} className="scroll-mt-28" aside={<Link href={`${routes.cloudRegions()}?country=${c.iso2}`} className="text-[12.5px] text-ink-3 hover:text-ink">All cloud regions →</Link>}>
            <Table dense mobileCollapse={{ total: cloud.length, label: "cloud regions" }}>
              <THead>
                <tr>
                  <Th>Provider</Th>
                  <Th>Code</Th>
                  <Th className="hidden sm:table-cell">Name</Th>
                  <Th className="hidden md:table-cell">City</Th>
                  <Th numeric>AZs</Th>
                  <Th>Status</Th>
                  <Th className="hidden lg:table-cell">Launched</Th>
                </tr>
              </THead>
              <TBody>
                {cloud.map((cr) => (
                  <Tr key={cr.id}>
                    <Td primary>
                      <Link href={routes.operator(cr.provider.slug)} className="font-medium text-ink hover:text-accent hover:underline">
                        {cr.provider.name}
                      </Link>
                      <span className="ml-1.5 text-[11.5px] text-ink-3 sm:hidden">{cr.name}</span>
                    </Td>
                    <Td label="Code">
                      <RowLink href={routes.cloudRegion(cr.slug)} className="figure text-[12.5px] font-normal">
                        {cr.code}
                      </RowLink>
                    </Td>
                    <Td label="Name" className="hidden sm:table-cell">
                      {cr.name}
                    </Td>
                    <Td label="City" className="hidden md:table-cell" muted>
                      {cr.city ?? "—"}
                    </Td>
                    <Td label="AZs" numeric>
                      {cr.availabilityZones === null ? <span className="text-ink-4">—</span> : fmtInt(cr.availabilityZones)}
                    </Td>
                    <Td label="Status">
                      <span className="inline-flex flex-wrap gap-1">
                        <Badge tone={cr.status === "operational" ? "ok" : cr.status === "announced" ? "info" : cr.status === "retired" ? "neutral" : "warn"} size="xs">
                          {cr.status}
                        </Badge>
                        {cr.isSovereign && (
                          <Badge tone="outline" size="xs" title="Sovereign cloud region">
                            Sovereign
                          </Badge>
                        )}
                      </span>
                    </Td>
                    <Td label="Launched" className="figure hidden text-[12px] text-ink-3 lg:table-cell">
                      {cr.launchedOn ? fmtDate(cr.launchedOn) : "—"}
                    </Td>
                  </Tr>
                ))}
              </TBody>
            </Table>
          </Section>
        )}

        <Section id="connectivity" title="Connectivity" description={`Internet exchanges with a published presence in ${c.name}'s facilities (PeeringDB and exchange operators).`} className="scroll-mt-28" aside={<Link href={`${routes.ixps()}?country=${c.iso2}`} className="text-[12.5px] text-ink-3 hover:text-ink">All {fmtInt(ixpCount)} IXPs →</Link>}>
          {ixps.length ? (
            <>
              <Table dense mobileCollapse={{ total: Math.min(ixps.length, IXP_ROWS), label: "exchanges" }}>
                <THead>
                  <tr>
                    <Th>Exchange</Th>
                    <Th className="hidden sm:table-cell">City</Th>
                    <Th numeric>Networks</Th>
                    <Th numeric>Facilities</Th>
                  </tr>
                </THead>
                <TBody>
                  {ixps.slice(0, IXP_ROWS).map((x) => (
                    <Tr key={x.id}>
                      <Td primary>
                        <RowLink href={routes.ixp(x.slug)}>{x.name}</RowLink>
                        {x.nameLong && x.nameLong !== x.name && <span className="ml-1.5 hidden text-[11.5px] text-ink-3 md:inline">{x.nameLong}</span>}
                      </Td>
                      <Td label="City" className="hidden sm:table-cell" muted>
                        {x.city ?? (x.metro?.name ?? "—")}
                      </Td>
                      <Td label="Networks" numeric>
                        {x.networkCount === null ? <span className="text-ink-4" title="Not published">—</span> : fmtInt(x.networkCount)}
                      </Td>
                      <Td label="Facilities" numeric lead>
                        {fmtInt(x.facilityCount)}
                      </Td>
                    </Tr>
                  ))}
                </TBody>
              </Table>
              {ixps.length > IXP_ROWS && (
                <p className="mt-2 text-[11.5px] text-ink-4">
                  First {IXP_ROWS} of {fmtInt(ixps.length)} exchanges by facility presence —{" "}
                  <Link href={`${routes.ixps()}?country=${c.iso2}`} className="underline decoration-hair-2 hover:text-ink">
                    see all
                  </Link>
                  .
                </p>
              )}
            </>
          ) : (
            <HonestEmpty title="No internet exchange presence recorded" detail="IXP presence comes from published IXP ↔ facility links; none is inferred" />
          )}
          <p className="mt-2 text-[11px] text-ink-4">
            Network counts are shown only when the exchange publishes them.{" "}
            <Link href={routes.connectivity()} className="underline decoration-hair-2 hover:text-ink">
              Connectivity index
            </Link>
          </p>
        </Section>

        {c.recentProjects.length > 0 && (
          <Section id="projects" title="Recent projects" description="Announced and under-construction developments." className="scroll-mt-28" aside={<Link href={routes.projects(`country=${c.iso2}`)} className="text-[12.5px] text-ink-3 hover:text-ink">All projects →</Link>}>
            <ProjectList items={c.recentProjects} />
          </Section>
        )}

        {c.recentEvents.length > 0 && (
          <Section id="changes" title="Recent changes" description="Latest detections for facilities and projects in the country." className="scroll-mt-28" aside={<Link href={routes.live(`country=${c.iso2}`)} className="text-[12.5px] text-ink-3 hover:text-ink">Live feed →</Link>}>
            <EventList events={c.recentEvents.slice(0, 10)} dense />
          </Section>
        )}

        <Section id="energy" title="Power & energy context" description="National electricity indicators for reading capacity figures against the grid." className="scroll-mt-28" aside={<Link href={routes.power()} className="text-[12.5px] text-ink-3 hover:text-ink">Power & grid →</Link>}>
          {c.energy ? <EnergyContextPanel e={c.energy} knownMw={c.knownMw} /> : <HonestEmpty title="No national electricity indicators recorded" />}
        </Section>

        <Section id="grid" title="Grid constraints" description="Moratoria, grid delays, load caps, new transmission, regulation and large-load queues reported for this country — observed events and curated public reports only, nothing inferred." className="scroll-mt-28">
          <GridConstraintList items={gridConstraints} emptyDetail="no report or grid event has been indexed for this country; that is an absence of reports, not proof of an unconstrained grid" />
        </Section>

        <Section id="coverage" title="Coverage" description="How much of this country the index actually knows — shown so the figures above can be read honestly." className="scroll-mt-28" aside={<Link href={routes.coverage()} className="text-[12.5px] text-ink-3 hover:text-ink">Coverage report →</Link>}>
          {c.coverage ? <CoverageStrip row={c.coverage} /> : <HonestEmpty title="Coverage not computed" />}
        </Section>

        <Section id="facilities" title="Facilities" description={`${fmtInt(facTotal)} indexed · sorted by known capacity`} className="scroll-mt-28" aside={<Link href={routes.datacenters(`country=${c.iso2}`)} className="text-[12.5px] text-ink-3 hover:text-ink">Filter & export →</Link>}>
          <PagedFacilities items={c.facilities} total={facTotal} page={fPage} perPage={facPer} hrefFor={(p) => fPageHref(base, sp, p)} columns={["operator", "market", "status", "mw", "type", "confidence"]} />
        </Section>

        {claims.length > 0 && (
          <Section id="claims" title="Claims about this country" description="Country-scoped figures (national programmes, aggregate capacity statements) — shown as evidence, never summed into facility totals." className="scroll-mt-28">
            <ClaimsTable claims={claims} kind="all" />
          </Section>
        )}
      </div>

      <SourcesFooter sources={r.sources} note="Country totals are lower bounds computed from published or filed values only; coverage shows the share of facilities with a capacity figure. Population, GDP and electricity: World Bank (CC BY 4.0)." />
    </Page>
  );
}